<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        html,body {
            background: #F6F8FA;
            margin:0;
            height: 100%;
        }
        .flex-column {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .item {
            position: relative;
            display: flex;
            align-items: center;
        }
        .item:before{
            content:'';
            position: absolute;
            left: -30px;
            width:1px ;
            /*这里的高度要等于自身高度 + 节点间margin高度 */
            height: calc(100% + 20px);
            top:0;
            transform: translateY(-10px);
            background: #53a1ef;
        }

        .item .title {
            display: block;
            padding: 10px 20px;
            border-radius: 100px;
            background: white;
            margin: 10px 0;
            box-shadow: 0 0 10px rgba(0,0,0,.05);
            margin-right: 60px;
            position: relative;
        }
        .item .title:before {
            content: "";
            position: absolute;
            left: -30px;
            top: 50%;
            width: 30px;
            height: 1px;
            background: #53a1ef;
        }



        .item .title {
            display: block;
            padding: 10px 20px;
            border-radius: 100px;
            background: white;
            margin: 10px 0;
            box-shadow: 0 0 10px rgba(0,0,0,.05);
            margin-right: 60px;
            position: relative;
        }
        .item .title:after {
            content:'';
            width: 30px;
            height: 1px;
            background: #53a1ef;
            position: absolute;
            right: -30px;
            top: 50%;
        }
            .item:first-child:before{
                height: calc(50% + 10px);
                transform: unset;
                top: 50%;
            }
            .item:last-child:before {
                height: calc(50% + 10px);
                transform: unset;
                top: -10px;
            }
            .item .title:not(:has(+.flex-column)):after{
                display: none;
            }
            
            </style>
            
        

</head>
<body style="display: flex; justify-content: center;align-items: center">

<div class="flex-column">
    <div class="item">
        <span class="title">AI_应用管理</span>

        <div class="flex-column">
            <div class="item"><span class="title">1. 什么是AI应用</span></div>
            <div class="item"><span class="title">2. AI应用-配置与测试</span></div>
            <div class="item"><span class="title">3. AI应用-挂载AI_Function</span></div>
            <div class="item"><span class="title">4. AI应用-挂载知识库</span></div>
        </div>

    </div>
    <div class="item">
        <span class="title">AI_知识库</span>

        <div class="flex-column">
            <div class="item"><span class="title">1. 什么是AI知识库</span></div>
            <div class="item"><span class="title">2. 知识库操作流程和原理</span></div>
        </div>

    </div>
</div>
<footer>
    <a href="https://blog.csdn.net/catastrophe_zy/article/details/139527559">参考网页</a>
</footer>
</body>
</html>
